import React, {
  Component,
  useEffect,
} from "react";
import ScrollableTabView, {
  ScrollableTabBar,
} from 'react-native-scrollable-tab-view';

import Content from "../../components/content/content"
import styles from "./task-sheet";

import ProcessTask from "../process-task/process-task";

import * as statusBarSetting from '../../model/statusBarSetting';

export default function Task(props) {
  statusBarSetting.useSetBackground(props);

  return (
    <ScrollableTabView style={styles.scrollableTabView}
			tabBarUnderlineStyle = {{backgroundColor:'#f6db7b',height:2}} //设置选中的Tab文字下方横线的样式
			tabBarBackgroundColor= 'white' //Tab的背景颜色
			tabBarActiveTextColor = '#f6db7b' //设置选中的Tab文字的颜色
			tabBarInactiveTextColor = 'gray' //设置未必选中的Tab文字的颜色
			tabBarTextStyle = {{fontSize: 14}} //设置Tab上字体的样式
			initialPage={0}//初始化被选中的tab下标，默认0 
      locked={false}
      renderTabBar={() => <ScrollableTabBar />}
    >
      <ProcessTask tabLabel='进行中' key='process' type={1} />
      <ProcessTask tabLabel='审核中' key='check' type={3} router={'CheckDetails'} />
      <ProcessTask tabLabel='已完成' key='complete' type={4} />
      <ProcessTask tabLabel='未达标' key='fail' type={5} />
      <ProcessTask tabLabel='已超时' key='timeout' type={6} />
    </ScrollableTabView>
  );
}